<style lang="less">
    @import './login.less';
    // .form-con .ivu-form-item {
    //     margin-bottom: 24px;
    // }
    .login-con {
        position: absolute;
        right: 160px;
        top: 50%;
        transform: translateY(-60%);
        width: 300px;
    }
    .yzmbox{
        position: absolute;
        top: -79px;
        z-index: 99;
        left: 28px;
        background: #eee;
        box-shadow: 1px 0px 13px 2px #b5b5b5;
        border-radius: 5px;
        height: 80px;
        overflow: hidden;
        display: block;
    }
</style>

<template>
    <div :class="'login '+imgbg" @keydown.enter="handleSubmit">
        <div class="login-con">
            <Card :bordered="false">
                <p slot="title">
                    <Icon type="log-in"></Icon>
                    欢迎登录
                </p>
                <div class="form-con">
                    <Form ref="loginForm" :model="form" :rules="rules">
                        <Alert v-if="info" type="error" show-icon>
                            {{info}}
                        </Alert>
                        <FormItem prop="Name">
                            <Input size="large" v-model="form.Name" placeholder="请输入用户名">
                                <span slot="prepend">
                                    <Icon :size="16" type="person"></Icon>
                                </span>
                            </Input>
                        </FormItem>
                        <FormItem prop="PassWord">
                            <Input size="large" type="password" v-model="form.PassWord" placeholder="请输入密码">
                                <span slot="prepend">
                                    <Icon :size="14" type="locked"></Icon>
                                </span>
                            </Input>
                        </FormItem>
                        <FormItem prop="CaptchaCode" class="v-ivu-append">
                            <Input ref="yzmInput" @on-focus="focus" @on-blur="blur" size="large" type="text" v-model="form.CaptchaCode" placeholder="请输入验证码">
                                <span slot="prepend">
                                    <Icon :size="14" type="social-reddit"></Icon> 
                                </span>
                                <!-- <span slot="append">
                                    <a @click="getyzm"><img :src="this.Img"></a>
                                </span> -->
                                <Button slot="append" icon="refresh" @click="renovateCode"></Button>
                            </Input>
                            <div class="yzmbox" v-if="y">
                                <a style="display:  block;" @click="getyzm"><img :src="this.Img"></a>
                            </div>
                        </FormItem>
                        <FormItem>
                            <Button :loading="loading" @click="handleSubmit" type="primary" long :disabled="form.Name&&form.CaptchaCode&&form.PassWord?false:true">登录</Button>
                        </FormItem>
                    </Form>
                    <!-- <p class="login-tip">输入任意用户名和密码即可</p> -->
                </div>
            </Card>
        </div>
    </div>
</template>

<script>
import md5 from 'js-md5';
import util from '@/libs/util';
export default {
    data () {
        return {
            y:false,
            key:'',
            imgbg:'',
            percent:0,
            form: {
                CapKey:'',
                CaptchaCode:'',
                Name: '',
                PassWord: '',
                UserType:'bankers'
            },
            rules: {
                Name: [
                    { required: true, message: '账号不能为空', trigger: 'blur' }
                ],
                PassWord: [
                    { required: true, message: '密码不能为空', trigger: 'blur' }
                ],
                CaptchaCode: [
                    { required: true, message: '验证码不能为空', trigger: 'blur' }
                ]
            },
            loading: false,
            info:'',
            Img:'',
        };
    },
    computed: {
        color () {
            let color = '#2db7f5';
            if (this.percent == 100) {
                color = '#5cb85c';
            }
            return color;
        }
    },
    created (){
        let myDate = new Date();
        let h=myDate.getHours()+1;
        if(h>=3&&h<=9) this.imgbg='loginbg6'
        if(h>=9&&h<=15) this.imgbg='loginbg12'
        if(h>=15&&h<=21) this.imgbg='loginbg18'
        if(h>=21||h<=3)this.imgbg='loginbg24'
    },
	mounted(){
        
        this.getyzm()
        // this.testlogin()
	},
    methods: {
        renovateCode(){
            this.getyzm()
            this.$refs.yzmInput.focus()
        },
        handleSubmit () {
            let _this=this
            this.percent=0
            let state = '正在验证登录信息...'
            this.$Spin.show({
                render: (h) => {
                    return h('div', [
                        h('i-Circle', {
                            props: {
                                percent: this.percent,
                                'stroke-color': this.color
                            }
                        },[
                            h('Icon',{
                                 props:{
                                     type:'ios-checkmark-empty',
                                     size:70,
                                     
                                 },
                                 style:{
                                     color:'#5cb85c',
                                     display:this.percent==100?'':'none'
                                 }
                            }),
                            h('span',{
                                style:{
                                    'font-size':'24px',
                                    display:this.percent!==100?'':'none'
                                }
                            },this.percent+'%')
                        ]),
                        h('div', {
                            props: {
                                
                            }
                        },state)
                    ])
                }
            });

            this.$refs.loginForm.validate((valid) => {
                
                if (valid) {
                    this.$api.login(this.form).then(function(response) {
                        _this.loading=true
                        response.json().then(function(responseJson) {
                            _this.loading=false
                            if(responseJson.success==true){
                                sessionStorage.pw= md5(_this.form.PassWord)
                                _this.info=''
                                sessionStorage.token= responseJson.data.access_token;
                                sessionStorage.access=responseJson.data.user_data.User.group_level
                                _this.percent=50
                                state = '正在同步所需配置...'
                                _this.$api.getGameInfo().then(response=>{
                                    response.json().then(responseJsons=> {
                                        sessionStorage.gameInfo=JSON.stringify(responseJsons.data)
                                        sessionStorage.user=JSON.stringify(responseJson.data)
                                        sessionStorage.users=JSON.stringify(responseJson.data.user_data.User);
                                        
                                        
                                        _this.$store.commit('setAvator', 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3448484253,3685836170&fm=27&gp=0.jpg');
                                        _this.$router.push({
                                            name: 'home_index'
                                        });
                                        util.blarr(responseJsons.data)
                                        _this.percent=100
                                        state = '完成!'
                                        setTimeout(() => {
                                            _this.$Spin.hide();
                                        }, 800);
                                    })
                                })
                                _this.$api.getOwn({uid:responseJson.data.user_data.User.id}).then(response=>{
                                    response.json().then(responseJsonss=> {
                                        sessionStorage.aRebate=JSON.stringify(responseJsonss)
                                    })
                                })
                                _this.$api.getGroup().then(function(response) {
                                    response.json().then(function(responseJson) {
                                        sessionStorage.group=JSON.stringify(responseJson.data)
                                    })
                                })
                            }else{
                                _this.$Spin.hide();
                                _this.info=responseJson.info
                                _this.getyzm()
                                _this.form.CaptchaCode=''
                            }
                        })
                        
                    })
                    
                }
            });




            
            
        },
        focus(){
            this.y=true
        },
        blur(){
            this.y=false
        },
        getyzm(){
            // sessionStorage.clear()
            let _this=this
            if(this.form.CapKey==''){
                this.$api.getCaptcha().then(function(response) {
                    _this.form.CapKey=response.headers.get('Set-Cap-Key');
                    
                    response.blob().then(function(responseBlob) {
                        if(_this.Img){
                            window.URL.revokeObjectURL(_this.Img);
                        }   
                        _this.Img = window.URL.createObjectURL(responseBlob);
                    })
                })
            }else{
                this.$api.setCaptcha(this.form.CapKey).then(function(response) {
                    response.blob().then(function(responseBlob) {
                        if(_this.Img){
                            window.URL.revokeObjectURL(_this.Img);
                        }   
                        _this.Img = window.URL.createObjectURL(responseBlob);
                    })
                })
            }
        },
        testlogin(){
            sessionStorage.setItem('user', '123');
            sessionStorage.setItem('password', '123');
            _this.$store.commit('setAvator', 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3448484253,3685836170&fm=27&gp=0.jpg');
            _this.$router.push({
                name: 'home_index'
            });
        }
    }
};
</script>

<style>

</style>
